<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div class="w-full relative" v-prmis="'auth_manager_add'">
				<el-button type="primary" @click="add">{{ $t('account.account.add')}}</el-button>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="nickname" :label="$t('account.account.name')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.nickname || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="account" :label="$t('account.account.login')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.account || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="organization_name" :label="$t('account.account.device')" show-overflow-tooltip>
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="getmaclist(scope.row)">
							{{ scope.row.machineNum || '0' }}
						</el-link>
					</template>
				</el-table-column>

				<el-table-column prop="real_name" :label="$t('account.account.realName')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.real_name || $t('account.account.notSet') }}
					</template>
				</el-table-column>

				<el-table-column prop="organization_name" :label="$t('account.account.WeChat')" show-overflow-tooltip>
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="bindusers(scope.row)">
							{{ scope.row.openid || $t('account.account.bind') }}
						</el-link>
					</template>
				</el-table-column>

				<el-table-column prop="pid" :label="$t('account.organization.higherLevel')" show-overflow-tooltip>
					<template #default="scope">
						{{ getpid(scope.row.pid) }}
					</template>
				</el-table-column>

				<el-table-column prop="sex" :label="$t('account.account.gender')" show-overflow-tooltip>
					<template #default="scope">
						{{ getsex(scope.row.sex) }}
					</template>
				</el-table-column>

				<el-table-column prop="pic" :label="$t('account.account.profile')">
					<template #default="scope">
						<el-image :src="scope.row.pic || imagesMap['user']" fit="fill" class="w-16 rounded-full" />
					</template>
				</el-table-column>

				<el-table-column prop="bill_account" :label="$t('account.account.fenrun')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.bill_account || $t('account.account.notSet') }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="danger"> {{ $t('public.disable') }} </el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="organization_name" :label="$t('account.account.BelongOrgan')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.organization_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="roleName" :label="$t('account.account.permis')" show-overflow-tooltip>
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="bindrole(scope.row)">
							{{ scope.row.roleName || '--' }}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="email" :label="$t('account.account.mail')" show-overflow-tooltip/>
				<el-table-column prop="wx_notice" :label="$t('account.account.notification')" show-overflow-tooltip>
					<template #default="scope">
						{{ setNotice(scope.row.wx_notice) }}
					</template>
				</el-table-column>
				<el-table-column prop="email_notice" :label="$t('account.account.email')" show-overflow-tooltip>
					<template #default="scope">
						{{ setNotice(scope.row.email_notice) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')" width="200">
					<template #default="scope">
						<el-button v-prmis="'auth_manager_updatePassword'" type="primary" size="small"
							@click="reset(scope.row)">{{ $t('public.reset') }}</el-button>
						<el-button v-prmis="'auth_manager_update'" type="success" size="small"
							@click="modify(scope.row)">{{ $t('public.edit') }}</el-button>
						<el-button v-prmis="'auth_manager_del'" type="danger" size="small"
							v-if="scope.row.manager_id != 1" @click="del(scope.row.manager_id)">{{ $t('public.del') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.user_info" @exposeData="current" @fraction="fraction" />
		</div>
		<el-dialog v-model="data.dialogVisible" :title="data.title" center :width="data.title_type == 4 ? '50%' : '30%'"
			@close="clean">
			<addinfo v-if="data.title_type == 1" :organ="data.organ" @investigate="addsubmit" />
			<modifyinfo v-if="data.title_type == 2" :info="data.minfo" @investigate="modifysubmit" />
			<resetinfo v-if="data.title_type == 3" :info="data.minfo" @investigate="resetsubmit" />
			<machinelist v-if="data.title_type == 4" :info="data.minfo" :list="data.maclist" @investigate="machinesubmit" />
			<wechatbind v-if="data.title_type == 5" :info="data.minfo" />
			<rolebind v-if="data.title_type == 6" :info="data.minfo" @investigate="rolebindsubmit" />
		</el-dialog>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import hierarchy from '@/utils/hierarchy';
import imagesMap from '@/assets/images_Js.ts';
import resetinfo from './common/reset_info.vue';
import addinfo from './common/add_info.vue';
import modifyinfo from './common/modify_info.vue';
import machinelist from './common/machine_list.vue';
import wechatbind from './common/wechat_bind.vue';
import rolebind from './common/role_bind.vue';
import getPlevel from '@/utils/level';
import {
	getauthmanagerList,
	updatePassword,
	addauthmanager,
	updateauthmanager,
	delauthmanager,
	bindmanagermachine,
	bindmanagerrole,
	unbindmanagerrole,
} from '@/api/account';
import { getmachineList } from '@/api/machine';
let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	title: '', // 弹窗标题
	title_type: 0, // 弹窗类型
	lookup: [ // 筛选栏
		{ title: $t('account.account.name'), type: 'input', value: '', key: 'nickname' },
		{ title: $t('account.account.role'), type: 'input', value: '', key: 'account' },
		{ title: $t('account.account.below'), type: 'define', select: [], value: '', key: 'pid' },
		{ title: $t('account.account.genderRole'), type: 'define', select: [], value: '', key: 'sex' },
		{ title: $t('account.role.roleStatus'), type: 'define', select: [], value: '', key: 'status' },
		{ title: $t('account.account.BelongOrgan'), type: 'define', select: [], value: '', key: 'ao_id' }
	],
	sex: [{ label: $t('account.account.secrecy'), value: 1 }, { label: $t('account.account.man'), value: 2 }, { label: $t('account.account.woman'), value: 3 }],
	status: [{ label: $t('public.enable'), value: 1 }, { label: $t('public.disable'), value: 2 }],
	thmanaglist: [], // 账号列表
	list: [], // 列表信息
	organ: [], // 组织列表
	maclist: [], // 设备列表
	user_info: { // 筛选数据
		nickname: '',
		account: '',
		pid: '',
		sex: '',
		status: '',
		ao_id: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	minfo: {}, // 选中的账号信息
})
let setNotice = (row: any) => {
	if (row) {
		let nameCn = []
		let arr = row.length ? row.split(',') : ''
		for (let items of getPlevel.noticeList) {
			for (let item of arr) {
				if (items.value == item) {
					nameCn.push($t(items.label))
					break
				}
			}

		}
		return nameCn.join(',')
	}
}
// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getauthmanagerList(data.user_info).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.user_info[key] = e[key]
	}
	data.user_info.page = 1
	data.user_info.pageNum = 15
	getlist()
}

// 获取账号上级
let getpid = (e) => {
	let name = '系统'
	for (let item of data.thmanaglist) {
		if (item.manager_id == e) {
			name = item.nickname
		}
	}
	return name
}

// 获取性别
let getsex = (e) => {
	let name = '保密'
	for (let item of data.sex) {
		if (item.value == e) {
			name = item.label
		}
	}
	return name
}

// 获取接口信息
let geturl = async () => {

	let machinelist = await getmachineList()
	let thmanag = await getauthmanagerList()
	let arrange = await hierarchy.arrange(1)
	data.organ = []
	let list = []

	// 设备列表
	if (machinelist.state == 200) {
		data.maclist = machinelist.data
	}

	// 账号列表
	if (thmanag.state == 200) {
		data.thmanaglist = thmanag.data
		for (let item of thmanag.data) {
			list.push({
				label: item.manager_id + ' - ' + item.nickname,
				value: item.manager_id
			})
		}
	}

	for (let item of arrange) {
		data.organ.push({
			label: item.ao_id + ' - ' + item.organization_name,
			value: item.ao_id,
		})
	}

	for (let item of data.lookup) {
		if (item.key == 'sex') {
			item.select = data.sex
		}
		if (item.key == 'status') {
			item.select = data.status
		}
		if (item.key == 'ao_id') {
			item.select = data.organ
		}
		if (item.key == 'pid') {
			item.select = list
		}
	}
}

// 添加账号
let add = () => {
	data.title = $t('account.account.add')
	data.title_type = 1
	data.dialogVisible = true
}

// 添加账号 - 提交
let addsubmit = (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}
	addauthmanager(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.addSuccess'),
				type: 'success'
			})
			data.dialogVisible = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 修改账号
let modify = (e) => {
	data.title = $t('account.account.modify')
	data.title_type = 2
	let info = JSON.stringify(e)
	data.minfo = JSON.parse(info)
	if (data.minfo.ao_id == 0) {
		data.minfo.ao_id = ''
	}
	data.dialogVisible = true
}

// 修改账号 - 提交
let modifysubmit = (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}
	updateauthmanager(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modifySuccess'),
				type: 'success'
			})
			data.dialogVisible = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 重置密码
let reset = (e) => {
	data.title = $t('system.system.reset')
	data.title_type = 3
	let info = JSON.stringify(e)
	data.minfo = JSON.parse(info)
	data.minfo.password = ''
	data.minfo.passwords = ''
	data.dialogVisible = true
}

// 重置密码 - 提交
let resetsubmit = (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}

	updatePassword(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.resetSuccess'),
				type: 'success'
			})
			data.dialogVisible = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 删除
let del = (e) => {
	ElMessageBox.confirm($t('message.isTip'))
		.then(res => {
			delauthmanager({ 'manager_id': e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 所属设备
let getmaclist = (e) => {
	data.title = $t('account.account.device')
	data.title_type = 4
	let info = JSON.stringify(e)
	data.minfo = JSON.parse(info)
	data.dialogVisible = true
}

// 所属设备 - 提交
let machinesubmit = (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}
	bindmanagermachine(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.setSuccess'),
				type: 'success'
			})
			data.dialogVisible = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 用户微信
let bindusers = (e) => {
	data.title = $t('account.account.bindWe')
	if (e.openid != '' && e.openid != null) {
		data.title = $t('account.account.releaseWe')
	}
	data.title_type = 5
	let info = JSON.stringify(e)
	data.minfo = JSON.parse(info)
	data.dialogVisible = true
}

// 所属权限
let bindrole = (e) => {
	data.title = $t('account.account.permis')
	data.title_type = 6
	let info = JSON.stringify(e)
	data.minfo = JSON.parse(info)
	data.dialogVisible = true
}

// 所属权限 - 提交
let rolebindsubmit = async (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}

	// 绑定
	if (e.info.role_id != '') {
		await bindmanagerrole(e.info).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.setSuccess'),
					type: 'success'
				})
			}
		}).catch(err => {
			console.log(err)
		})
	}

	// 解除
	if (e.del != '') {
		await unbindmanagerrole({ mr_id: e.del }).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.delSuccess'),
					type: 'success'
				})
			}
		}).catch(err => {
			console.log(err)
		})
	}

	data.dialogVisible = false
	getlist()

}

// 清除弹窗内容
let clean = () => {
	data.title_type = 0
	data.dialogVisible = false
}

// 页数回调
let current = (e) => {
	data.user_info.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.user_info.pageNum = e
	getlist()
}

geturl()
getlist()

</script>
